<template>
  <div class="search-container">
    <div class="search">
      <el-row style="line-height: 40px;">
        <el-col :span="4" style="font-size: 26px; text-align: center"> {{ context }}</el-col>
        <el-col :span="4">
          <el-input v-model="userName" placeholder="用户名" clearable />
        </el-col>
        <el-col :span="2">
          <el-button type="primary" icon="el-icon-search" @click="searchName">搜索</el-button>
        </el-col>
      </el-row>
    </div>
    <slot />
  </div>
</template>

<script>
export default {
  name: 'Search',
  props: {
    context: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      userName: ''
    }
  },
  methods: {
    searchName() {
      this.$emit('search-name', this.userName)
    }
  }
}
</script>

<style scoped>
  .search-container {
    margin-left: auto !important;
    margin-right: auto !important;
    width: 1200px;
    height: 100px;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
  }

  .search {
    padding-top: 20px;
  }
</style>
